
import { Text, Button, Box, Image, Center, Container, Input,
  InputGroup, InputLeftElement, InputRightElement,
  HStack, VStack, AlertDialog, AlertDialogOverlay,
  AlertDialogContent, AlertDialogHeader, AlertDialogFooter,
  AlertDialogBody } from '@chakra-ui/react'
import { css } from '@emotion/core'
import { AiOutlineSearch } from 'react-icons/ai'
import { BiMicrophone } from 'react-icons/bi'
import React, { useRef, useState } from 'react'

const logo = css`
  transform: translateX(50%);
`

const inputImg = css`
  transform: scale(2);
`

const title = css`
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
`

const list = [
  { name: '百度一下，你就知道', link: 'http://baidu.com', image: 'http://baidu.com/favicon.ico' },
  { name: '拉钩教育', link: 'https://kaiwu.lagou.com', image: 'https://kaiwu.lagou.com/favicon.ico' },
  { name: '添加快捷方式', link: 'add', image: 'images/add.svg' }
]

export default function Chrome () {
  const [isOpen, setIsOpen] = React.useState(false)
  const [name, setName] = React.useState('')
  const changeName = (event) => setName(event.target.value)
  const [link, setLink] = React.useState('')
  const changeLink = (event) => setLink(event.target.value)
  const onClose = () => {
    setIsOpen(false)
    setName('')
    setLink('')
  }
  const cancelRef = React.useRef()

  
  function clickButton (link) {
    if (link === 'add') {
      setIsOpen(true)
      return
    }
    window.location.href = link
  }

  function addLink () {
    if (link === '') return
    list.splice(-1, 0, {
      name: name !== '' ? name : link,
      link,
      image: `${link}/favicon.ico`
    })
    onClose()
  }

  return (
    <>
      <Center mt={200}>
        <Container>
          <Image css={logo} src="/images/google_logo.svg" />
          <InputGroup mt={30}>
            <InputLeftElement
              w={50}
              pointerEvents="none"
              children={<AiOutlineSearch color="gray.500" />}
            />
            <Input w={500} borderRadius="20px" postype="tel" placeholder="在Google上搜索，或者输入一个网址" />
            <InputRightElement
              w={50}
              pointerEvents="none"
              children={<BiMicrophone color="blue" />}
            />
          </InputGroup>
          <HStack w={500} mt={30} spacing={0}>
            {list.map(item => (
              <Box as="button" _hover={{ bg: "#ebedf0" }}
                borderRadius="5px" w="100px" p="10px" key={item.name}
                onClick={() => clickButton(item.link)}>
                <Box d="flex" alignItems="center" w="50px" h="50px"
                  mx="auto" borderRadius="25px" bgColor="#f1f3f4">
                  <Image w="20px" h="20px" mx="auto" src={item.image}></Image>
                </Box>
                <Box mt="20px" css={title} w="80px" fontSize="10px">
                  {item.name}
                </Box>
              </Box>
            ))}
          </HStack>
        </Container>
      </Center>
      <AlertDialog
        motionPreset="slideInBottom"
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
        isCentered
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              添加快捷方式
            </AlertDialogHeader>

            <AlertDialogBody>
              <Box>名称</Box>
              <Input value={name} onChange={changeName} /> 
              <Box>地址</Box>
              <Input value={link} onChange={changeLink} /> 
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button colorScheme="gray" ref={cancelRef} onClick={onClose}>
                <Text color="#1a73e8">取消</Text>
              </Button>
              <Button colorScheme="gray" onClick={addLink} ml={3}>
                <Text color="gray.500">完成</Text>
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  )
}